<!DOCTYPE html>
<html lang="en">
<head>
    <!-- http-equiv="Content-Type" -->
    <meta content="text/html; charset=utf-8" />
    <title>控制台</title>
    <link rel="stylesheet" href="__CDN__/assets/css/css/index.css" type="text/css" />
    <script type="text/javascript" src="__CDN__/assets/js/js/jquery.min.js"></script>
    <meta name="viewport" content="user-scalable=0">
    <meta http-equiv="content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="__CDN__/assets/js/js/rem.js"></script>
    <style type="text/css">
        .miners {
            height: 5.6rem;
            /* border: 0.01rem solid #0197ED; */
            background: #fff;
        }

        .miners .minersleft {
            width: 10.8rem;
            height: 100%;
            background: #fff;
            border-right:0.02rem solid #F9FAFC;
        }
        .minertitle{
            height:0.5rem;
            font-weight: 600;
            line-height: 0.5rem;
            padding-left:0.2rem;
        }
        .miners .minersright {
            width: 5.5rem;
            height: 100%;
            background: #fff;
        }
        .mrowtop{
            height: 0.4rem;
            padding:0.1rem;
            padding-top:0.3rem;
            padding-bottom:0.3rem;

        }
        .mrowtop .mrowbtn{
            width:1.2rem;
            height:0.4rem;
            font-size:0.14rem;
            font-weight:bold;
            color:rgba(106,194,245,1);
            line-height:0.2rem;
            padding: 0.1rem;
            border-radius: 0.5rem;
            background:rgba(245,247,250,1);
            text-align: center;

        }
        .rowbg{
            background:#6AC2F5!important ;
            color: #fff!important;
        }
        .flexminerow{
            height: 0.4rem;
            line-height: 0.4rem;
            font-weight: 600;
            padding:0 0.5rem;
        }
        .notminer{
            width:4.48rem;
            height:2.25rem;
            font-size:0.14rem;
            padding: 0.1rem;
            border: 0.01rem solid #0197ED;
            margin-left:0.5rem;
        }
        .notTile{
            border-left:0.03rem solid #0197ED;
            height: 0.2rem;
            padding-left:0.1rem;
        }
        .notTilebox{
            height: 1.0rem;
            border:0.01rem solid #00f;
        }
        .notCard{
            height: 1.0rem;
        }
        .notCard .notimg{
            width: 0.54rem;
            height: 0.54rem;
        }
        .notCard .notimg img{
            width: 0.54rem;
            height: 0.54rem;
        }
        .notCard .notext{
            width: 2rem;
            margin-left:0.2rem;
        }
        .notCard .notext div{
            height:0.3rem;
            line-height: 0.5rem;
        }
    </style>
</head>
<body>
<div class="container">
    <!-- 星际钱包资产与数字货币资产-->
    <!-- 钱包集合行 -->
    <!-- 钱包集合行 -->
    <div class="wallets flexStart">
        <!-- 静态钱包 -->
        <div class="wallet">
            <div class="wallet-top flexbetween">
                <div class="wleft  flexcenter">充值MU</div>
                <div class="wright flexcenter">查看</div>
            </div>
            <div class="wallet-bom">
                <img src="__CDN__/assets/img/img/w1.png" alt="">
                <div class="wtotal">{$total_pay_mu}</div>
            </div>
        </div>
        <!-- 可售钱包 -->
        <div class="wallet">
            <div class="wallet-top flexbetween">
                <div class="wleft  flexcenter">活动MU</div>
                <div class="wright flexcenter">查看</div>
            </div>
            <div class="wallet-bom">
                <img src="__CDN__/assets/img/img/w2.png" alt="">
                <div class="wtotal">{$total_active_mu}</div>
            </div>
        </div>
        <!-- 任务钱包 -->
        <div class="wallet">
            <div class="wallet-top flexbetween">
                <div class="wleft  flexcenter">MQ</div>
                <div class="wright flexcenter">查看</div>
            </div>
            <div class="wallet-bom">
                <img src="__CDN__/assets/img/img/w3.png" alt="">
                <div class="wtotal">{$total_mq}</div>
            </div>
        </div>
    </div>


    <!-- 查询搜索框 -->
    <div id="searchRow" class="flexStart">
        <!--<div class="inputbox">-->
            <!--<input type="text">-->
        <!--</div>-->
        <!--<div class="marktext">至</div>-->
        <!--<div class="inputbox">-->
            <!--<input type="text">-->
        <!--</div>-->
        <!--<div class="btn flexcenter">查询</div>-->
    </div>

    <!-- 充币 提币  提币手续费  奖励统计-->
    <div class="Recharge flexaround">
        <!-- echart.js区域一 -->
        <div class="Service">
            <div class="navrow flexStart" id="chong">
                <div class="navbtn navborder bigf">充值</div>
                <!--<div class="navbtn bigf">提币</div>-->
                <!--<div class="navbtn bigf">提币手续费</div>-->
            </div>
            <div class="navrow  flexbetween">
                <div class="flexStart">
                    <div class="navbtn">充值总数</div>
                    <div class="navbtn">{$total_recharge}</div>
                    <!--<div class="navbtn">提币手续费</div>-->
                </div>
                <div id="fbtns">
                    <!--<div class="mbtn mbtnblue">FIL3</div>-->
                    <!--<div class="mbtn">ETH</div>-->
                    <!--<div class="mbtn">BTC</div>-->
                    <!--<div class="mbtn">USDT</div>-->
                </div>
            </div>
            <div class="echartContainer">
                <div id="mymain" style="width:450px;height:280px;"></div>
            </div>
        </div>
        <!-- echart.js区域二-->
        <div class="Service">
            <div class="navrow flexStart" id="erchong">
                <div class="navbtn navborder bigf">奖励统计</div>
            </div>
            <div class="navrow  flexbetween">

            </div>
            <div class="echartContainer">
                <div id="mains" style="width:600px;height:300px;"></div>
            </div>
        </div>
    </div>

    <!-- otc统计 -->
    <div class="otccontainer flexStart">
        <!-- otc左侧盒子 -->
        <div class="otcleft">
            <div class="navrow flexStart borderd" id="otcrow">
                <div class="navbtn navborder bigf">OTC统计</div>
                <!--<div class="navbtn bigf">闪兑统计</div>-->
            </div>
            <div class="rowboxs flexbetween">
                <div class="rows">
                    <div class="flexrow flexbetween">
                        <div class="flexrowl">OTC总充值量</div>
                        <div class="flexrowr bluec">查看</div>
                    </div>
                    <div class="flexrow flexbetween blueStrong">
                        <div class="flexrowl">{$otc_recharge}</div>
                        <div class="flexrowr">{$otc_recharge_num}</div>
                    </div>
                    <div class="flexrow flexbetween">
                        <div class="flexrowl">总金额(otc)</div>
                        <div class="flexrowr">笔数</div>
                    </div>
                </div>
                <!-- 充值成功 -->
                <div class="rows">
                    <div class="flexrow flexbetween">
                        <div class="flexrowl">充值成功</div>
                        <div class="flexrowr bluec">查看</div>
                    </div>
                    <div class="flexrow flexbetween blueStrong">
                        <div class="flexrowl">{$otc_recharge_success}</div>
                        <div class="flexrowr">{$otc_recharge_success_num}</div>
                    </div>
                    <div class="flexrow flexbetween">
                        <div class="flexrowl">总金额(otc)</div>
                        <div class="flexrowr">笔数</div>
                    </div>
                </div>
                <!-- 卖出量 -->
                <div class="rows">
                    <div class="flexrow flexbetween">
                        <div class="flexrowl">卖出量</div>
                        <div class="flexrowr bluec">查看</div>
                    </div>
                    <div class="flexrow flexbetween blueStrong">
                        <div class="flexrowl">{$otc_exchange}</div>
                        <div class="flexrowr">{$otc_exchange_num}</div>
                    </div>
                    <div class="flexrow flexbetween">
                        <div class="flexrowl">总金额(otc)</div>
                        <div class="flexrowr">笔数</div>
                    </div>
                </div>
                <!-- 卖出成功 -->
                <div class="rows">
                    <div class="flexrow flexbetween">
                        <div class="flexrowl">卖出成功</div>
                        <div class="flexrowr bluec">查看</div>
                    </div>
                    <div class="flexrow flexbetween blueStrong">
                        <div class="flexrowl">{$otc_exchange_success}</div>
                        <div class="flexrowr">{$otc_exchange_success_num}</div>
                    </div>
                    <div class="flexrow flexbetween">
                        <div class="flexrowl">总金额(otc)</div>
                        <div class="flexrowr">笔数</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- otc右侧盒子 -->
        <div class="otcright">
            <div class="navrow flexbetween borderd">
                <div class="navbtn  bigf">用户总量：{$total_user}</div>
                <div class="navbtn bluec">查看详情</div>
            </div>
            <div class="datatable flexbetween">
                <div class="datachild">
                    <div class="canvs"><canvas class="loader1" style="margin-left:-20px;margin-top:-50px;"></canvas></div>
                    <div class="zhu">今日注册</div>
                    <div class="number">{$today_user}</div>
                </div>
                <div class="datachild">
                    <div class="canvs"><canvas class="loader2" style="margin-left:-20px;margin-top:-50px;"></canvas></div>
                    <div class="zhu">实名用户</div>
                    <div class="number">{$name_user}</div>
                </div>
                <div class="datachild">
                    <div class="canvs"><canvas class="loader3" style="margin-left:-20px;margin-top:-50px;"></canvas></div>
                    <div class="zhu">已购买矿机用户</div>
                    <div class="number">{$live_user}</div>
                </div>
            </div>
        </div>
    </div>
    <!-- otc统计end -->


    <!-- 矿机总数矿机总数矿机总数 -->

    <div class="miners flexbetween">
        <div>
            <div class="minertitle">矿机总数</div>
            <div id="minerdata" style="width:1100px;height:350px;"></div>
        </div>

    </div>

    <div class="miners flexbetween">

        <div>
            <div class="minertitle">产矿量</div>
            <div id="minerdata2" style="width:1100px;height:350px;"></div>
        </div>
    </div>

        <!--<div class="minersright">-->
            <!--<div class="mrowtop flexbetween" id="rowbtns">-->
                <!--<div class="mrowbtn rowbg" id="xin_miner">星际云矿机</div>-->
                <!--<div class="mrowbtn" id="xian_miner">限时抢购矿机</div>-->
                <!--<div class="mrowbtn" id="fu_miner">福利矿机</div>-->
                <!--<div class="mrowbtn" id="fil_miner">FIL星际矿机</div>-->
                <!--<div class="mrowbtn" id="jiang_miner">奖励矿机</div>-->
            <!--</div>-->
            <!--<div class="flexminerow flexbetween">-->
                <!--<div>应产矿总量</div>-->
                <!--<div id="output_total"></div>-->
            <!--</div>-->
            <!--<div class="flexminerow flexbetween">-->
                <!--<div>矿机总量</div>-->
                <!--<div>12382691</div>-->
            <!--</div>-->
            <!--<div class="flexminerow flexbetween">-->
                <!--<div>今日新增</div>-->
                <!--<div>12382691</div>-->
            <!--</div>-->

            <!--<div class="notminer">-->
                <!--<div class="notTile">未产矿总量</div>-->
                <!--&lt;!&ndash;  <div class="notTilebox">-->
                       <!--<div id="mainline" style="width:400px;height:200px;"></div>-->
                  <!--</div> &ndash;&gt;-->
                <!--<div class="notCard flexStart">-->
                    <!--<div class="notimg">-->
                        <!--<img src="__CDN__/assets/img/img/w10.png" alt="">-->
                    <!--</div>-->
                    <!--<div class="notext">-->
                        <!--<div style="font-weight: 600;font-size: 0.2rem;">372868</div>-->
                        <!--<div style="line-height: 0.3rem;font-size: 0.06rem;color:#999">未产矿总量（IPST）</div>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->

        <!--</div>-->
    <!--</div>-->





</div>
<div id="showtoast" class="showtoast">
    <div id="msg" class="msg"></div>
</div>
</body>
<script src="__CDN__/assets/js/js/echarts.min.js"></script>
<script src="__CDN__/assets/js/js/jquery-2.1.1.min.js"></script>
<script src="__CDN__/assets/js/js/jquery.classyloader.min.js"></script>
<script type="text/javascript">
    var Orderdata = {
        today_input: {:json_encode($today_input)},
        today_share: {:json_encode($today_share)},
        today_jian: {:json_encode($today_jian)},
        today_she: {:json_encode($today_she)},
        today_input_get: {:json_encode($today_input_get)},
        total_user: {:json_encode($total_user)},
        today_user: {:json_encode($today_user)},
        name_user: {:json_encode($name_user)},
        live_user: {:json_encode($live_user)},
        ti: {:json_encode($ti)},
        xin: {:json_encode($xin)},
        fu: {:json_encode($fu)},
        fil: {:json_encode($fil)},
        xian: {:json_encode($xian)},
        jiang: {:json_encode($jiang)},
        ti_today: {:json_encode($ti_today)},
        xin_today: {:json_encode($xin_today)},
        fu_today: {:json_encode($fu_today)},
        fil_today: {:json_encode($fil_today)},
        xian_today: {:json_encode($xian_today)},
        jiang_today: {:json_encode($jiang_today)},
    usdt_x: {:json_encode(array_keys($usdt))},
    usdt_y: {:json_encode(array_values($usdt))},


    xin_output_total: {:json_encode($xin_output_total)},
    xin_output_num: {:json_encode($xin_output_num)},
    xin_wei: {:json_encode($xin_wei)},

    fu_output_total: {:json_encode($fu_output_total)},
    fu_output_num: {:json_encode($fu_output_num)},
    fu_wei: {:json_encode($fu_wei)},

    fil_output_total: {:json_encode($fil_output_total)},
    fil_output_num: {:json_encode($fil_output_num)},
    fil_wei: {:json_encode($fil_wei)},

    xian_output_total: {:json_encode($xian_output_total)},
    xian_output_num: {:json_encode($xian_output_num)},
    xian_wei: {:json_encode($xian_wei)},

    jiang_output_total: {:json_encode($jiang_output_total)},
    jiang_output_num: {:json_encode($jiang_output_num)},
    jiang_wei: {:json_encode($jiang_wei)},

    };

    var domain = 'http://www.ipst.xyz/api/'; //正式
    //点击总资产切换
    $('.topleftbtn').click(() => {
        $('.topleftbtn').addClass('selecked'); //追加样式
    $('.toprightbtn').removeClass('selecked'); //移除样式
    });

    $('.toprightbtn').click(() => {
        $('.toprightbtn').addClass('selecked'); //追加样式
    $('.topleftbtn').removeClass('selecked'); //移除样式
    });

    //充币提币选项卡
    $("#chong div").click(function() {
        $("#chong div").removeClass('navborder')
        $("#chong div").eq($(this).index()).addClass('navborder')
        // 获取其中的值为  $("#fbtns div").eq($(this).index()).html();
        var val = $("#chong div").eq($(this).index()).html();
        console.log("你选中的是" + val);

    })

    // fil3--usdt选项卡
    $("#fbtns div").click(function() {
        $("#fbtns div").removeClass('mbtnblue')
        $("#fbtns div").eq($(this).index()).addClass('mbtnblue')
        // 当前点击的下标  $(this).index();
        // 获取其中的值为  $("#fbtns div").eq($(this).index()).html();
        var val = $("#fbtns div").eq($(this).index()).html();
        console.log("你选中的是" + val);

    })

    // otc统计行选项卡
    $("#otcrow div").click(function() {
        $("#otcrow div").removeClass('navborder')
        $("#otcrow div").eq($(this).index()).addClass('navborder')
        // 当前点击的下标  $(this).index();
        // 获取其中的值为  $("#fbtns div").eq($(this).index()).html();
        var val = $("#otcrow div").eq($(this).index()).html();
        console.log("你选中的是" + val);

    })




    // 矿机总量统计行选项卡
    $("#rowbtns div").click(function() {
        $("#rowbtns div").removeClass('rowbg')
        $("#rowbtns div").eq($(this).index()).addClass('rowbg')
        // 当前点击的下标  $(this).index();
        // 获取其中的值为  $("#fbtns div").eq($(this).index()).html();
        var val = $("#rowbtns div").eq($(this).index()).html();
        console.log("你选中的是" + val);

    })


    var myChart = echarts.init(document.getElementById('mymain'));
    var myCharts = echarts.init(document.getElementById('mains'));
    // 充提数据
    option = {

        title: {
            text: '单位：USDT'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#BFF6FF'
                }
            }
        },
        legend: {
            data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            boundaryGap: false,
            data: Orderdata.usdt_x
        }],
        yAxis: [{
            type: 'value'
        }],
        series: [{
            name: '',
            type: 'line',
            stack: '总量',
            label: {
                normal: {
                    show: true,
                    position: 'top'
                }
            },
            areaStyle: {
                normal: {}
            },
            data: Orderdata.usdt_y
        }]
    };

    myChart.setOption(option);

    // 饼图start=======================================
    optionbing = {
        title: {
            text: '奖励统计',
            subtext: '',
            x: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['今日矿机产量', '今日分享奖励', '今日见点奖励', '今日社区奖励', '已领取矿机产量']
        },
        series: [{
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [{
                value: Orderdata.today_input,
                name: '今日矿机产量'
            },
                {
                    value: Orderdata.today_share,
                    name: '今日分享奖励'
                },
                {
                    value: Orderdata.today_jian,
                    name: '今日见点奖励'
                },
                {
                    value: Orderdata.today_she,
                    name: '今日社区奖励'
                },
                {
                    value: Orderdata.today_input_get,
                    name: '已领取矿机产量'
                }
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }]
    };
    myCharts.setOption(optionbing);
    // 饼图end=======================================

    // 三个小圆形=======================================
    $('.loader1').ClassyLoader({
        speed: 30,
        diameter: 20,
        fontSize: '10px',
        fontFamily: 'Courier',
        fontColor: 'rgba(85,132,255,1)',
        lineColor: 'rgba(85,132,255,1)',
        percentage: (Orderdata.today_user/Orderdata.total_user)*100, //数量值
        lineWidth: 15,
        start: 'top',
        remainingLineColor: 'rgba(200,200,200,0.1)'
    });

    $('.loader2').ClassyLoader({
        speed: 30,
        diameter: 20,
        fontSize: '10px',
        fontFamily: 'Courier',
        fontColor: 'rgba(85,132,255,1)',
        lineColor: 'rgba(85,132,255,1)',
        percentage: (Orderdata.name_user/Orderdata.total_user)*100, //数量值
        lineWidth: 15,
        start: 'top',
        remainingLineColor: 'rgba(200,200,200,0.1)'
    });

    $('.loader3').ClassyLoader({
        speed: 30,
        diameter: 20,
        fontSize: '10px',
        fontFamily: 'Courier',
        fontColor: 'rgba(85,132,255,1)',
        lineColor: 'rgba(85,132,255,1)',
        percentage: (Orderdata.live_user/Orderdata.total_user)*100, //数量值
        lineWidth: 15,
        start: 'top',
        remainingLineColor: 'rgba(200,200,200,0.1)'
    });


    // 三个小圆形end=======================================


    // 矿机总数============================
    var miners = echarts.init(document.getElementById('minerdata'));
    optionmine = {
        legend: {},
        tooltip: {},
        dataset: {
            source: [
                {product: '星际云矿机', '正在运行的矿机': Orderdata.xin, '今日新增矿机': Orderdata.xin_today,矿机总量:Orderdata.xin_output_num,},
                {product: '福利矿机', '正在运行的矿机': Orderdata.fu, '今日新增矿机': Orderdata.fu_today, 矿机总量:Orderdata.fu_output_num,},
                {product: 'FIL星际矿机', '正在运行的矿机': Orderdata.fil, '今日新增矿机':Orderdata.fil_today, 矿机总量:Orderdata.fil_output_num,},
                {product: '限时抢购矿机', '正在运行的矿机': Orderdata.xian, '今日新增矿机':Orderdata.xian_today,矿机总量:Orderdata.xian_output_num,},
                {product: '奖励矿机', '正在运行的矿机': Orderdata.jiang, '今日新增矿机': Orderdata.jiang_today,矿机总量:Orderdata.jiang_output_num,}
            ]

        },
        xAxis: {type: 'category'},
        yAxis: {},
        series: [
            {type: 'bar'},
            {type: 'bar'},
            {type: 'bar'},
        ]
    };

    miners.setOption(optionmine);

    // 矿机总产量============================
    var miners = echarts.init(document.getElementById('minerdata2'));
    optionmine = {
        legend: {},
        tooltip: {},
        dataset: {
            source: [
                {product: '星际云矿机','应产矿总量':Orderdata.xin_output_total,未产矿总量:Orderdata.xin_wei },
                {product: '福利矿机', '应产矿总量':Orderdata.fu_output_total,未产矿总量:Orderdata.fu_wei },
                {product: 'FIL星际矿机', '应产矿总量':Orderdata.fil_output_total,未产矿总量:Orderdata.fil_wei  },
                {product: '限时抢购矿机', '应产矿总量':Orderdata.xian_output_total,未产矿总量:Orderdata.xian_wei },
                {product: '奖励矿机','应产矿总量':Orderdata.jiang_output_total,未产矿总量:Orderdata.jiang_wei }
            ]

        },
        xAxis: {type: 'category'},
        yAxis: {},
        series: [
            {type: 'bar'},
            {type: 'bar'},
        ]
    };

    miners.setOption(optionmine);



    // 未产矿量
    // var mainline = echarts.init(document.getElementById('mainline'));
    // optionline = {
    //     xAxis: {
    //         type: 'category',
    //         data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    //     },
    //     yAxis: {
    //         type: 'value'
    //     },
    //     series: [{
    //         data: [820, 932, 901, 934, 1290, 1330, 1320],
    //         type: 'line',
    //         smooth: true
    //     }]
    // };

    // mainline.setOption(optionline);



    $('#showprice').click(() => {
        $('#jiangli').toggle();
    });

    // var host = "http://www.ipst.xyz/api/";
    var host = "http://btcoin.com/";
    $(document).ready(function(){
        $("#xin_miner").click(function(){
            $.ajax({
                type: "POST",
                url:host + "admin/Dashboard/index",
                data: {miner_cat:1},
                dataType: "json",
                success: function(data){
                    $("#output_total").html(Orderdata.output_total);
                }
            });

        });
        $("#fu_miner").click(function(){
            $.ajax({
                type: "POST",
                url:host + "admin/Dashboard/index",
                data: {miner_cat:2},
                dataType: "json",
                success: function(data){
                    $("#output_total").html(123);
                }
            });

        });
        $("#fil_miner").click(function(){
            $.ajax({
                type: "POST",
                url:host + "admin/Dashboard/index",
                data: {miner_cat:3},
                dataType: "json",
                success: function(data){
                    $("#output_total").html(Orderdata.output_total);
                }
            });

        });
        $("#xian_miner").click(function(){

            $.ajax({
                type: "POST",
                url:host + "admin/Dashboard/index",
                data: {miner_cat:4},
                dataType: "json",
                success: function(data){
                    $("#output_total").html(Orderdata.output_total);
                }
            });

        });
        $("#jiang_miner").click(function(){

            $.ajax({
                type: "POST",
                url:host + "admin/Dashboard/index",
                data: {miner_cat:5},
                dataType: "json",
                success: function(data){
                    $("#output_total").html(Orderdata.output_total);
                }
            });

        });
    });
</script>
</html>
